class Init {
    constructor() {
        this.div = null;
        this.lis = null;
        this.sizeGird = 70;
        this.size = 7;
        this.len = null;
    }
    start() {

        this.ul = document.querySelector('#list');
        this.lis = document.getElementsByTagName('li');
        this.len = this.size * this.size;

        this.createElement();
        this.findElem();
    }
    createElement() {
        this.ul.style.width = this.sizeGird * this.size + 'px';
        // 创建元素
        for (let i = 0; i < this.len; i++) {
            this.li = document.createElement('li');
            this.li.style.width = this.sizeGird + 'px';
            this.li.style.height = this.sizeGird + 'px';
            this.li.style.backgroundSize = 'cover';
            this.li.className = 'box' + Math.floor(Math.random() * 6);
            this.ul.appendChild(this.li);
        }
    }
    findElem() {
        // 查找元素
        let result = [];
        let that = this;

        function findArr(_lis) {

            let iNum = 0;
            let prveLi = _lis[0];

            for (let i = 0; i < _lis.length; i++) {
                // 寻找相连的排除换行的
                if (prveLi.className == _lis[i].className && i % that.size != 0) {
                    iNum++;
                } else {
                    // iNum - > 2
                    if (iNum >= 2) {
                        for (let j = 0; j <= iNum; j++) {
                            // (i - 1) - j 找到对应的元素 去重
                            if (that.toCon(result)) {
                                result.unshift(_lis[(i - 1) - j]);
                            }
                        }
                    }
                    iNum = 0;
                }
                prveLi = _lis[i];
            }
        }

        findArr(this.lis);
        // 调用变换矩阵
        findArr(this.changeXY(this.lis, this.size));

        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].style.opacity = 0.3;
        }

        for (let i = 0; i < result.length; i++) {
            result[i].style.opacity = 1;
        }
    }
    toCon(result, li) {
        for (let i = 0; i < result.length; i++) {
            if (result[i] == li) {
                return false;
            }
        }
        return true;
    }
    changeXY(arr, size) {
        let newArr = [];
        let iNow = 0;
        d();

        function d() {
            if (size == iNow) {
                return;
            }
            for (let i = 0; i < arr.length; i++) {
                if (i % size == iNow) {
                    newArr.push(arr[i]);
                }
            }
            iNow++;
            d()
        }
        return newArr;
    }
}

let init = new Init();
init.start();